<template>
  <div class="box">
    <!-- 页面顶部区域 -->
    <div class="boxtop">
      <van-nav-bar title="评估结果">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="onClickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- 评估信息 -->
    <div class="elevalationInfo">评估信息</div>
    <van-collapse v-model="activeNames" class="topheader">
      <!-- 安全部件 -->
      <van-collapse-item name="1" v-if="this.saft.length != 0">
        <template #title>
          <div>
            <span class="centerText">安全部件</span>
            <van-badge :content="saft.length" />
            <span class="cneterserise">{{ vhclEva.safetyGrade }}</span>
          </div>
        </template>
        <!-- 单元格 -->
        <div v-for="(item, index) in this.saft" :key="index">
          <van-cell-group>
            <div>
              <van-collapse-item
                :title="item.partName"
                :name="100 + index"
                value="异常"
              >
                <!-- 损伤部位 -->
                <van-cell-group v-if="item.partName">
                  <div>
                    <van-cell title="损伤部位" :value="item.partName" />
                  </div>
                </van-cell-group>
                <!-- 损伤表述 -->
                <van-cell-group v-if="item.dmgName">
                  <div>
                    <van-cell title="损伤描述" :value="item.dmgName" />
                  </div>
                  <!-- 图片 -->
                  <div class="SaftPhtne" v-if="item.dmgImg">
                    <div class="neiphote">
                      <van-image
                        v-for="(item, index) in item.dmgImg"
                        :key="index"
                        :src="item.dmgImg"
                      />
                    </div>
                  </div>
                </van-cell-group>
              </van-collapse-item>
            </div>
          </van-cell-group>
        </div>
      </van-collapse-item>
      <van-cell v-if="this.saft.length == 0" class="ass" title="安全部件" value="正常" />
      <!-- 内饰部件 -->
      <van-collapse-item name="2" v-if="this.upholstery.length != 0">
        <template #title>
          <div>
            <span class="centerText">内饰部件</span>
            <van-badge :content="upholstery.length" />
            <span class="cneterserise">{{ vhclEva.trimGrade }}</span>
          </div>
        </template>
        <!-- 单元格 -->
        <div v-for="(item, index) in this.upholstery" :key="index">
          <van-cell-group>
            <div>
              <van-collapse-item
                :title="item.partName"
                :name="200 + index"
                value="异常"
              >
                <!-- 损伤部位 -->
                <van-cell-group v-if="item.partName">
                  <div>
                    <van-cell title="损伤部位" :value="item.partName" />
                  </div>
                </van-cell-group>
                <!-- 损伤表述 -->
                <van-cell-group v-if="item.dmgName">
                  <div>
                    <van-cell title="损伤描述" :value="item.dmgName" />
                  </div>
                  <!-- 图片 -->
                  <div class="SaftPhtne" v-if="item.dmgImg">
                    <div class="neiphote">
                      <van-image
                        v-for="(item, index) in item.dmgImg"
                        :key="index"
                        :src="item.dmgImg"
                      />
                    </div>
                  </div>
                </van-cell-group>
              </van-collapse-item>
            </div>
          </van-cell-group>
        </div>
      </van-collapse-item>
      <van-cell
        v-if="this.upholstery.length == 0"
        class="ass"
        title="内饰部件"
        value="正常"
      />
      <!-- 外观部件 -->
      <van-collapse-item name="3" v-if="this.facade.length != 0">
        <template #title>
          <div>
            <span class="centerText">外观部件</span>
            <van-badge :content="facade.length" />
            <span class="cneterserise">{{ vhclEva.facadeGrade }}</span>
          </div>
        </template>
        <!-- 单元格 -->
        <div v-for="(item, index) in this.facade" :key="index">
          <van-cell-group>
            <div>
              <van-collapse-item
                :title="item.partName"
                :name="300 + index"
                value="异常"
              >
                <!-- 损伤部位 -->
                <van-cell-group v-if="item.partName">
                  <div>
                    <van-cell title="损伤部位" :value="item.partName" />
                  </div>
                </van-cell-group>
                <!-- 损伤表述 -->
                <van-cell-group v-if="item.dmgName">
                  <div>
                    <van-cell title="损伤描述" :value="item.dmgName" />
                  </div>
                  <!-- 图片 -->
                  <div class="SaftPhtne" v-if="item.dmgImg">
                    <div class="neiphote">
                      <van-image
                        v-for="(item, index) in item.dmgImg"
                        :key="index"
                        :src="item.dmgImg"
                      />
                    </div>
                  </div>
                </van-cell-group>
              </van-collapse-item>
            </div>
          </van-cell-group>
        </div>
      </van-collapse-item>
      <van-cell v-if="this.facade.length == 0" class="ass" title="外观部件" value="正常" />
      <!-- 性能部件 -->
      <van-collapse-item name="4" v-if="this.performance.length != 0">
        <template #title>
          <div>
            <span class="centerText">性能部件</span>
            <van-badge :content="performance.length" />
            <span class="cneterserise">{{ vhclEva.performanceGrade }}</span>
          </div>
        </template>
        <!-- 单元格 -->
        <div v-for="(item, index) in this.performance" :key="index">
          <van-cell-group>
            <div>
              <van-collapse-item
                :title="item.partName"
                :name="400 + index"
                value="异常"
              >
                <!-- 损伤部位 -->
                <van-cell-group v-if="item.partName">
                  <div>
                    <van-cell title="损伤部位" :value="item.partName" />
                  </div>
                </van-cell-group>
                <!-- 损伤表述 -->
                <van-cell-group v-if="item.dmgName">
                  <div>
                    <van-cell title="损伤描述" :value="item.dmgName" />
                  </div>
                  <!-- 图片 -->
                  <div class="SaftPhtne" v-if="item.dmgImg">
                    <div class="neiphote">
                      <van-image
                        v-for="(item, index) in item.dmgImg"
                        :key="index"
                        :src="item.dmgImg"
                      />
                    </div>
                  </div>
                </van-cell-group>
              </van-collapse-item>
            </div>
          </van-cell-group>
        </div>
      </van-collapse-item>
      <van-cell
        v-if="this.performance.length == 0"
        class="ass"
        title="性能部件"
        value="正常"
      />
      <!-- 动态部件 -->
      <van-collapse-item name="5" v-if="this.active.length != 0">
        <template #title>
          <div>
            <span class="centerText">动态部件</span>
            <van-badge :content="active.length" />
            <span class="cneterserise">A1</span>
          </div>
        </template>
        <!-- 单元格 -->
        <div v-for="(item, index) in this.active" :key="index">
          <van-cell-group>
            <div>
              <van-collapse-item
                :title="item.partName"
                :name="500 + index"
                value="异常"
              >
                <!-- 损伤部位 -->
                <van-cell-group v-if="item.partName">
                  <div>
                    <van-cell title="损伤部位" :value="item.partName" />
                  </div>
                </van-cell-group>
                <!-- 损伤表述 -->
                <van-cell-group v-if="item.dmgName">
                  <div>
                    <van-cell title="损伤描述" :value="item.dmgName" />
                  </div>
                  <!-- 图片 -->
                  <div class="SaftPhtne" v-if="item.dmgImg">
                    <div class="neiphote">
                      <van-image
                        v-for="(item, index) in item.dmgImg"
                        :key="index"
                        :src="item.dmgImg"
                      />
                    </div>
                  </div>
                </van-cell-group>
              </van-collapse-item>
            </div>
          </van-cell-group>
        </div>
      </van-collapse-item>
      <van-cell
        v-if="this.active.length == 0"
        class="ass"
        title="动态部件"
        value="正常"
      />

      <!-- 仪器检测 -->
      <van-collapse-item name="6" v-if="this.check.length != 0">
        <template #title>
          <div>
            <span class="centerText">仪器检测</span>
            <van-badge :content="check.length" />
            <span class="cneterserise">A1</span>
          </div>
        </template>
        <!-- 单元格 -->
        <div v-for="(item, index) in this.check" :key="index">
          <van-cell-group>
            <div>
              <van-collapse-item
                :title="item.partName"
                :name="600 + index"
                value="异常"
              >
                <!-- 损伤部位 -->
                <van-cell-group v-if="item.partName">
                  <div>
                    <van-cell title="损伤部位" :value="item.partName" />
                  </div>
                </van-cell-group>
                <!-- 损伤表述 -->
                <van-cell-group v-if="item.dmgName">
                  <div>
                    <van-cell title="损伤描述" :value="item.dmgName" />
                  </div>
                  <!-- 图片 -->
                  <div class="SaftPhtne" v-if="item.dmgImg">
                    <div class="neiphote">
                      <van-image
                        v-for="(item, index) in item.dmgImg"
                        :key="index"
                        :src="item.dmgImg"
                      />
                    </div>
                  </div>
                </van-cell-group>
              </van-collapse-item>
            </div>
          </van-cell-group>
        </div>
      </van-collapse-item>
      <van-cell v-if="this.check.length == 0" class="ass" title="仪器检测" value="正常" />
    </van-collapse>
    <div class="KongGe"></div>
    <!-- 官方制定报价平台 -->
    <div class="center">
      <!-- 官方制作报价平台 -->
      <!-- 第一行 -->
      <div class="centerBox">
        <div class="centerPrice">官方制定报价平台</div>
        <span class="price" @click="ClickPrice">精准报价</span>
      </div>
      <!-- 第二行价格 -->
      <!-- <van-row class="firstrouter">
        <van-col span="6" offset="5"
          ><span class="rrrrr">{{ pricePlate.dealerBuyPrice }}</span></van-col
        >
        <van-col span="6" offset="4"
          ><span class="rrrrr">{{ pricePlate.dealerPrice }}</span></van-col
        >
      </van-row> -->
      <!-- 第二行价格车 -->
      <van-row class="router">
        <van-col span="12">
          <div
            style="text-align: center; color: blue; font-size: 16px"
            v-if="this.collectionPrice"
          >
            {{ collectionPrice }}万
          </div>
          <div style="text-align: center; color: blue" v-else>- -</div>
          <div class="price">车商收车价</div></van-col
        >
        <van-col span="12">
          <div
            style="text-align: center; color: red; font-size: 16px"
            v-if="this.retailPrice"
          >
            {{ retailPrice }}万
          </div>
          <div style="text-align: center; color: red" v-else>- -</div>
          <div class="price">车商零售价</div></van-col
        >
      </van-row>
      <!-- <van-divider /> -->
      <!-- 第二个模块 -->
      <!-- 第二行价格 -->
      <!-- <van-row class="firstrouter">
        <div class="xfirstrouter">
          <div class="money">11万</div>
          <div class="money">22万</div>
        </div>
        <div class="xfirstrouter">
          <div class="money">11万</div>
          <div class="money">22万</div>
        </div>
      </van-row> -->
      <van-divider />
      <!-- 第二行价格车 -->
      <van-row class="router">
        <van-col span="12">
          <div style="text-align: center; color: blue">- -</div>
          <div class="price">车商拍卖价</div></van-col
        >
        <van-col span="12">
          <div style="text-align: center; color: red">- -</div>
          <div class="price">帮卖价</div></van-col
        >
      </van-row>

      <!-- <van-row class="firstrouter">
        <div class="xfirstrouter">
          <div class="money">11万</div>
          <div class="money">22万</div>
        </div>
        <div class="xfirstrouter">
          <div class="money">11万</div>
          <div class="money">22万</div>
        </div>
      </van-row> -->
      <van-divider />
      <!-- 同业交易价 -->
      <div class="ToghterPrice">
        <div class="price">同业交易价</div>
        <span v-if="this.pricedititial" class="pricedititial"
          >{{ pricedititial }}万</span
        >
        <span v-else class="pricedititial">**万</span>
      </div>
    </div>
    <!-- 第二个阴影部分 -->
    <div class="KongGe"></div>
    <!-- 近款历史收购价(同城) -->
    <div class="bottomBox">
      <div class="bottomtop">
        <div class="historyPrice">同款历史收购价(同城)</div>
        <span class="All" @click="allHistoryPrice">全部</span>
      </div>
      <!-- 车的品牌信息 -->
      <div
        class="carInfo"
        v-for="(item, index) in this.historyPrice"
        :key="index"
      >
        <!-- 车名 -->
        <div class="carName">{{ item.modelName }}</div>
        <!-- 评级 -->
        <div class="carLever">
          <div class="lever">评级</div>
        </div>
        <!-- 时间 -->
        <div class="bottomend">
          <div class="bottomEndtime">{{ item.soldTime }}</div>
          <span class="bottomEnddigist">{{ item.soldPrice }}万</span>
        </div>
      </div>
    </div>
    <!-- 阴影部分 -->
    <div class="KongGe"></div>
    <!-- 评估师最终报价 -->
    <div class="endpricebottom">
      <div class="endprice">评估师最终报价</div>
      <span class="price">{{ vhclEva.evaPrice }}</span>
      <!-- <span class="quote" @click="clickQuote">历史报价</span> -->
    </div>
    <van-divider />
    <!-- 客户期望价格 -->
    <div class="endpricebottom">
      <div class="endprice">客户期望价格</div>
      <span class="price">{{ vhclEva.custExpPrice }}</span>
    </div>
    <van-divider />
    <!-- 按钮区域 -->
    <div>
      <van-row class="rowStyle">
        <van-col offset="2" span="7">
          <div class="bottomButton" @click="waitGo">
            <span class="buttonColor">待跟进</span>
          </div>
        </van-col>
        <van-col span="7">
          <div class="bottomButton" @click="againCheck">
            <span class="buttonColor">再次检测</span>
          </div>
        </van-col>
        <van-col span="7">
          <div class="bottomButton" @click="toSign">
            <span class="buttonColor">去签约</span>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 待跟进的弹出层 -->
    <van-popup position="bottom" :style="{ height: '70%' }" v-model="TanShowaa">
      <!-- 两边的按钮 -->
      <div class="BestWai">
        <div class="buttonLeft">跟进信息</div>
        <div class="buttonRight" @click="sumitClick">确定</div>
      </div>
      <!-- 跟进信息 -->
      <div class="boxInput">
        <van-field
          v-model="custIntentItem.followupContent"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入内容"
          show-word-limit
        />
      </div>
      <!-- 时间日期 -->
      <div class="TimePick">
        <div class="FollowTime">下次跟进时间</div>
        <van-datetime-picker
          v-model="custIntentItem.planFollowupDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :show-toolbar="false"
          @change="changetime"
        />
      </div>
    </van-popup>
  </div>
</template>
<script>
import {
  FirstEvelationResult,
  EvelatePrice,
  follow
} from '@/api/user'
export default {
  data() {
    return {
      activeNames: ['1'],
      // 安全部件
      saft: [],
      // 外观模式
      facade: [],
      // 内饰部件
      upholstery: [],
      // 性能部件
      performance: [],
      // 动态部件
      active: [],
      // 仪器检测
      check: [],
      // 精准报价
      evaType: '1',
      vhclEvaId: '45',
      // 精确报价
      vhclEva: {},
      // 指定官方报价平台
      pricePlate: {},
      // 同业交易价
      pricedititial: '',
      // 历史收购价
      historyPrice: [],
      // 车商收车价
      collectionPrice: '',
      // 车商零售价
      retailPrice: '',
      // 拍卖价
      auctionPrice: '',
      // 帮卖价
      helpellingPrice: '',
      // 跟进信息
      custIntentItem: {
        // 跟进信息
        followupContent: '',
        // 跟进时间
        planFollowupDate: ''
      },
      TanShowaa: false,
      currentDate: '',
      minDate: new Date(),
      business: {
        businessId: this.$route.query.businessId
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      // 路由跳转接收参数
      const { data } = await FirstEvelationResult(this.$route.query.vhclEvaId)
      console.log(data, 'data')
      if (data.code === 200) {
        if (data.data.vhclEva) {
          this.vhclEva = data.data.vhclEva
        }
        if (data.data.map) {
          this.saft = data.data.map[10]
          this.facade = data.data.map[20]
          this.upholstery = data.data.map[30]
          this.performance = data.data.map[40]
          this.check = data.data.map[50]
          this.active = data.data.map[60]
        }

        // 历史收购价,需要转化成格式JSON.stringify
        if (data.data.valuation) {
          this.historyPrice = JSON.parse(
            data.data.valuation.historyDealerBuyList
          )
        }
      } else {
        this.$toast('获取失败')
      }
    },
    // 精确报价
    async ClickPrice() {
      try {
        const { data } = await EvelatePrice({
          // evaType: 2,
          evaType: this.vhclEva.evaType,
          vhclEvaId: this.vhclEva.vhclEvaId + ''
        })
        console.log(data.data, 'data.data')
        console.log(this.vhclEva.evaType, 'this.vhclEva.evaType')
        if (data.code == 200) {
          this.pricedititial = data.data.guildPrice // 同业交易价
          this.collectionPrice = data.data.dealerPrice // 车商收车价
          this.retailPrice = data.data.dealerSoldPrice // 车商零售价
        } else {
          if (this.vhclEva.evaType && this.vhclEva.evaType == 1) {
            this.$dialog
              .alert({
                title: '提示',
                message: '精准报价还需耐心等待 5 分钟',
                confirmButtonText: '知道了',
                confirmButtonColor: '#4397d4'
              })
              .then(() => {
                // on close
              })
          } else {
            this.$dialog
              .alert({
                title: '提示',
                message: '非本产品请跳转页面查看',
                confirmButtonText: '查看非本产品报价',
                confirmButtonColor: '#4397d4'
              })
              .then(() => {
                // on close
              })
          }
        }
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    clickQuote() {
      this.$router.push('/historyprice')
    },
    changetime(picker) {
      const timeArry = picker.getValues()
      // 循环时间
      this.custIntentItem.planFollowupDate = `${timeArry[0]}-${timeArry[1]}-${timeArry[2]}`
      // console.log(this.currentDate)
    },
    // 待跟进
    waitGo() {
      this.TanShowaa = true
    },
    // 确定提交
    async sumitClick() {
      // 调用接口
      try {
        await follow({
          reqType: 4,
          business: this.business,
          custIntentItem: this.custIntentItem
        })
        this.TanShowaa = false
        // 路由跳转
        this.$router.push('/infoedit')
      } catch (err) {
        this.$toast('待跟进失败')
      }
    },
    againCheck() {
      console.log('跳转到再次检测')
    },
    toSign() {
      this.$router.push('/signroporte')
    },
    onClickLeft() {
      this.$router.back()
    },
    // 全部近款历史收购价
    allHistoryPrice() {
      this.$router.push('/historyprice')
    }
  }
}
</script>
<style lang="less" scoped>
// 底部按钮
.rowStyle {
  height: 50px;
  line-height: 50px;
  .bottomButton {
    width: 90px;
    height: 30px;
    border-radius: 19px;
    background-color: #4397d4;
    display: flex;
    align-items: center;
    justify-content: center;
    .buttonColor {
      display: inline;
      color: #ffff;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
.endpricebottom {
  margin-top: 10px;
  display: flex;
  .endprice {
    width: 115px;
    padding-left: 15px;
    font-size: 14px;
    color: #393939;
  }
  .quote {
    margin-left: 132px;
    font-size: 12px;
    color: #60a7db;
  }
  .price {
    display: inline;
    font-size: 14px;
    color: #393939;
    padding-left: 50px;
  }
}
// 底部区域
.bottomBox {
  position: relative;
  .bottomtop {
    display: flex;
    align-items: center;
    justify-content: center;
    .historyPrice {
      width: 200px;
      height: 40px;
      font-size: 15px;
      font-weight: 500;
      color: #333333;
      line-height: 40px;
    }
    .All {
      position: absolute;
      top: 13px;
      right: 15px;
      font-size: 12px;
      color: #60a7db;
    }
  }
  .carInfo {
    margin-bottom: 20px;
    .carName {
      padding-left: 15px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    .carLever {
      margin-top: 10px;
      margin-bottom: 10px;
      display: flex;
      .lever {
        padding-left: 15px;
        font-size: 12px;
        color: #919191;
      }
      .enhlish {
        display: inline;
        font-size: 12px;
        padding-left: 10px;
        color: #919191;
      }
    }
    .bottomend {
      display: flex;
      align-items: center;
      position: relative;
      height: 20px;
      // justify-content: center;
      .bottomEndtime {
        font-size: 12px;
        padding-left: 15px;
        color: #919191;
      }
      .bottomEnddigist {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 12px;
        color: #919191;
      }
    }
  }
}
.centerText {
  display: inline;
  font-size: 14px;
  margin-right: 7px;
}
// 评估信息
.elevalationInfo {
  color: #a4a4a4;
  height: 30px;
  background-color: #f6f6f9;
  font-size: 14px;
  line-height: 30px;
  padding-left: 17px;
}
.cneterserise {
  position: absolute;
  right: 40px;
  top: 10px;
}
.KongGe {
  height: 10px;
  background-color: #f6f6f9;
}
// 中间区域
.center {
  // 同行交易价
  .ToghterPrice {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    .price {
      font-size: 16px;
      color: #676767;
    }
    .pricedititial {
      display: inline;
      font-size: 12px;
      padding-left: 35px;
    }
  }
  .firstrouter {
    justify-content: space-between;
    display: flex;
    .xfirstrouter {
      flex: 1;
      margin: 10px 20px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #d3d2d2;
      .money {
        font-size: 14px;
      }
    }
  }
  .router {
    margin-top: 10px;
  }
  .thirrouter {
    margin-top: 15px;
    .thirprice {
      display: inline-block;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
    }
  }
  .rrrrr {
    display: inline;
    font-size: 16px;
    color: #60a7db;
  }
  .price {
    text-align: center;
    font-size: 14px;
  }
  position: relative;
  .centerBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    .centerPrice {
      width: 120px;
      height: 40px;
      font-size: 15px;
      font-weight: 500;
      color: #333333;
      line-height: 40px;
    }
    .price {
      position: absolute;
      top: 13px;
      right: 15px;
      font-size: 12px;
      color: #60a7db;
    }
  }
  // 第二个阴影部分
  .backgroundColor {
    height: 10px;
    background-color: #f6f6f9;
  }
}
.SaftPhtne {
  display: flex;
  .neiphote {
    width: 82px;
    height: 82px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #dddddd;
    margin-left: 20px;
    text-align: center;
    line-height: 82px;
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
}
.BestWai {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  .buttonLeft {
    font-size: 16px;
    color: #5f5f5f;
    font-weight: 700;
  }
  .buttonRight {
    font-size: 17px;
    color: #4397d4;
    font-weight: 700;
  }
}
.boxInput {
  width: 343px;
  height: 97px;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  margin-top: 20px;
}
.TimePick {
  padding-left: 10px;
  margin-top: 10px;
  .FollowTime {
    font-size: 22px;
    margin-bottom: 10px;
  }
}
::v-deep .topheader {
  .van-cell__value {
    color: red;
  }
}
::v-deep .ass {
  .van-cell__value {
    color: blue;
  }
}
</style>
